<template>
  <view class="order-item">
    <view class="order-status">
      状态
      <text>{{ orderStatus }}</text>
    </view>
    <view
      v-if="
        [
          OrderStatusEnum.DELIVERED,
          OrderStatusEnum.RECEIVED,
          OrderStatusEnum.COMPLETED,
        ].includes(orderStatus) && order.logistics
      "
      class="order-status"
    >
      物流信息：
      <text class="logistics"
        >{{ order.logistics.companyName }} {{ order.logistics.number }}</text
      >
    </view>
    <view class="order-number">
      <view class="icon-file" />
      订单号：
      <text>{{ order.orderNumber }}</text>
    </view>
    <product
      v-for="product in order.orderProducts"
      :key="product.id"
      :product="product"
    />
    <view class="product-number"
      >商品数量
      <text>{{ order.orderProducts.length }}</text>
    </view>
    <view class="shipping-cost"
      >运费
      <text>0</text>
    </view>
    <view class="total-amount"
      >商品总金额
      <text>￥{{ totalPrice }}</text>
    </view>
  </view>
</template>
<script lang="ts">
import "./index.less";
import Product from "../product/index.vue";
import { OrderStatusEnum } from "./const";
import { moneyFormat } from "../../../../../../services/products-service";
export default {
  components: {
    product: Product,
  },
  props: ["order"],
  data() {
    return {
      OrderStatusEnum,
    };
  },
  computed: {
    orderStatus(): string {
      return OrderStatusEnum[this.order.status];
    },
    totalPrice(): string {
      return moneyFormat(this.order.totalPrice.money);
    },
  },
};
</script>
